/**
 * 样式常量
 */

import { CSSProperties } from 'react';
import { BUTTON_SIZE, POSITION, Z_INDEX, DIALOG_SIZE } from '../constants';

// 渐变色配置
export const GRADIENT_COLORS = {
  primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
};

// 浮动按钮容器样式
export const floatingButtonContainerStyle: CSSProperties = {
  position: 'fixed',
  bottom: `${POSITION.bottom}px`,
  right: `${POSITION.right}px`,
  zIndex: Z_INDEX.button,
};

// 浮动按钮样式
export const floatingButtonStyle = (isOpen: boolean): CSSProperties => ({
  width: `${BUTTON_SIZE.width}px`,
  height: `${BUTTON_SIZE.height}px`,
  borderRadius: '50%',
  background: GRADIENT_COLORS.primary,
  boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
  cursor: 'pointer',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  transition: 'all 0.3s ease',
  transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
});

// 对话框容器样式
export const dialogContainerStyle: CSSProperties = {
  position: 'fixed',
  bottom: `${POSITION.dialogBottom}px`,
  right: `${POSITION.right}px`,
  width: `${DIALOG_SIZE.width}px`,
  height: `${DIALOG_SIZE.height}px`,
  backgroundColor: '#fff',
  borderRadius: '12px',
  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
  zIndex: Z_INDEX.dialog,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
  animation: 'slideUp 0.3s ease',
};

// 对话框头部样式
export const dialogHeaderStyle: CSSProperties = {
  padding: '20px',
  background: GRADIENT_COLORS.primary,
  color: '#fff',
  borderTopLeftRadius: '12px',
  borderTopRightRadius: '12px',
};

// 头像样式
export const avatarStyle: CSSProperties = {
  width: '40px',
  height: '40px',
  borderRadius: '50%',
  background: 'rgba(255, 255, 255, 0.2)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
};

// 消息区域样式
export const messageAreaStyle: CSSProperties = {
  flex: 1,
  padding: '20px',
  overflowY: 'auto',
  backgroundColor: '#f5f7fa',
};

// 欢迎消息卡片样式
export const welcomeCardStyle: CSSProperties = {
  backgroundColor: '#fff',
  padding: '16px',
  borderRadius: '8px',
  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
};

// 输入区域样式
export const inputAreaStyle: CSSProperties = {
  padding: '16px',
  borderTop: '1px solid #e8e8e8',
  backgroundColor: '#fff',
};

// 发送按钮样式
export const sendButtonStyle: CSSProperties = {
  background: GRADIENT_COLORS.primary,
  border: 'none',
};

// CSS 动画
export const CSS_ANIMATION = `
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
`;
